<template>
  <div>
    <ul class="card_con">
      <li
        class="card"
        v-for="(item, index) in cardArr"
        :key="index"
        :class="[`card${index}`, item.iscur && 'cur']"
        @click="cardEvent(item, index)"
      >
        <div class="side_con" v-if="!item.isplay">
          <div class="card_back" ref="card_back">
            <div class="icon"></div>
            <p class="btn_txt">点击翻牌</p>
          </div>
          <div class="card_front">
            <Lottery :cstatus="fstatus" :camount="famount"></Lottery>

            <div class="btn_share" @click="goShare($event)"></div>
            <div class="car"></div>
            <div class="close" @click="closeCard($event, item)"></div>
          </div>
        </div>

        <!-- 翻过的牌 -->
        <div class="fake" v-else>
          <div class="icon"></div>
          <p class="btn_txt">已翻过</p>
        </div>
      </li>
    </ul>

    <!-- 重复点击已经翻过的牌显示 -->
    <div class="repeat" ref="repeat">
      <div class="btn_share" @click="goShare($event)"></div>
      <div class="close" @click="closePop"></div>
    </div>
  </div>
</template>

<script>
import Qs from "qs";
import Lottery from "../components/lottery.vue";
export default {
  name: "Card",
  components: { Lottery },
  props: {
    remainTime: Number, // 剩余抽奖机会
    cardIdx: Array, //抽了几次奖
  },
  data() {
    return {
      fstatus: -1,
      famount: 0,
      // 卡片数组,iscur:当前翻的牌,isplay:是否翻过
      cardArr: [
        { iscur: false, isplay: false },
        { iscur: false, isplay: false },
        { iscur: false, isplay: false },
        { iscur: false, isplay: false },
        { iscur: false, isplay: false },
      ],
    };
  },
  methods: {
    // 接口获取数据更新卡牌对象数据(哪些已翻)
    updatedCard() {
      this.cardArr.map((item, index) => {
        this.cardIdx.indexOf(index + "") > -1 && (item.isplay = true);
      });
    },

    // 翻牌事件
    cardEvent(item, index) {
      // 正在翻
      if (item.iscur) return;

      // 您已完成全部翻牌
      if (this.cardIdx.length > 4) {
        this.$toast("您已完成全部翻牌");
        return;
      }
      // 机会用完
      if (this.remainTime < 1) {
        if (item.isplay) {
          this.$parent.isfixed = true;
          this.$refs.repeat.style.display = "block";
          return;
        }

        this.$toast({
          message: "您没有抽奖机会，请分享好友赢取机会吧",
          onClose: () => {
            this.$parent.goShare();
          },
        });
        return;
      }
      // 此牌已翻过
      if (item.isplay) {
        this.$parent.isfixed = true;
        this.$refs.repeat.style.display = "block";
        return;
      }
      // 调取lottery接口

      this.$http({
        method: "post",
        url: `${this.$CONF.baseUrl}lottery.jsp?ischeck=false`,
        data: Qs.stringify({
          cardId: index,
        }),
      })

        .then((res) => {
          // fstatus   1:succ, 2:sorry; 3:final
          let data = res.data;
          switch (data.code) {
            case 1:
              if (data.isAward === 1 && data.amount > 0) {
                this.fstatus = 1;
                this.famount = data.amount;
                this.$parent.used === 4 && (this.fstatus = 3);
              } else {
                this.fstatus = 2;
              }
              this.$parent.isfixed = true;
              item.iscur = true;
              this.$parent.remain > 0 && this.$parent.remain--;
              break;
            case -1:
              this.$toast(data.msg);
              this.$router.replace("home");
              break;
            case -7:
              this.fstatus = 2;
              this.$parent.isfixed = true;
              item.iscur = true;
              this.$parent.remain > 0 && this.$parent.remain--;
              break;
            case -6:
              this.$toast("您没有抽奖机会，请分享好友赢取机会");
              break;
            default:
              this.$toast(data.msg);
              break;
          }
        })
        .catch((err) => {
          this.$toast("网络不佳，请稍后重试");
          this.$router.replace("home");
        });
    },

    // 关闭正常翻牌弹框
    closeCard(event, item) {
      event.stopPropagation(); //阻止冒泡事件
      this.$parent.isfixed = false;
      item.isplay = true;
      item.iscur = false;
      this.$emit("changeCard", item.index);
      this.$parent.used++;
    },

    // 关闭repeat弹窗
    closePop() {
      this.$parent.isfixed = false;
      this.$refs.repeat.style.display = "none";
    },
    goShare(event) {
      event && event.stopPropagation(); //阻止冒泡事件
      this.$router.push({ path: `/share/${this.$parent.id}` });
    },
  },
  mounted() {
    this.updatedCard();
  },
};
</script>

<style lang="scss">
.card_con {
  width: 7.5rem;
  height: 1.07rem;
  position: absolute;
  top: 0;
  .card {
    width: 1.86rem;
    height: 2.39rem;
    position: absolute;
    perspective: 800px;
    transform: rotateY(0deg);
    &.cur {
      position: fixed;
      width: 7.5rem;
      height: 10.61rem;
      z-index: 100;
      top: 1rem !important;
      left: 0 !important;
      &::before {
        display: none;
      }
      .side_con {
        transform: rotateY(180deg);
        .card_back {
          width: 4.8rem;
          height: 7.2rem;
          border: none;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }
    .card_back,
    .fake {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      border: 0.04rem solid #f8e1b8;
      background: #ffa539;
      position: absolute;
      left: 0;
      top: 0;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      font-size: 0.18rem;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      -webkit-tap-highlight-color: transparent;
      .icon {
        width: 1.16rem;
        height: 1.16rem;
        position: absolute;
        top: 0.3rem;
        left: 50%;
        transform: translateX(-50%);
      }
      .btn_txt {
        width: 1.51rem;
        height: 0.38rem;
        background: #ffbe71;
        border-radius: 0.19rem;
        color: #ffe6ce;
        line-height: 0.39rem;
        text-align: center;
        font-size: 0.24rem;
        font-weight: 600;
        letter-spacing: 0.02rem;
        position: absolute;
        top: 1.58rem;
        left: 50%;
        transform: translateX(-50%);
      }
    }
    .side_con {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      transition: 0.6s;
      transform-style: preserve-3d;
      .card_front {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        transform: rotateY(-180deg);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        font-size: 0.18rem;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        -webkit-tap-highlight-color: transparent;
        background: url(../assets/images/res.png) no-repeat center top / contain;
        .btn_share {
          display: block;
          width: 4.81rem;
          height: 1.02rem;
          background: url(../assets/images/btn_share.png) no-repeat center top / contain;
          margin: 0 auto;
        }
        .car {
          width: 7.5rem;
          height: 4.48rem;
          margin-top: 0.38rem;
        }
        .close {
          width: 1rem;
          height: 1rem;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }
    &::before {
      content: "";
      width: 2.03rem;
      height: 2.23rem;
      position: absolute;
      top: 0.08rem;
      left: -0.08rem;
      z-index: 10;
      background: url(../assets/images/border.png) no-repeat center top / contain;
    }
    &.card0 {
      left: 0.56rem;
      .icon {
        background: url(../assets/images/icon1.png) no-repeat center top / contain;
      }
      .car {
        background: url(../assets/images/qin.png) no-repeat center top / contain;
      }
    }
    &.card1 {
      left: 2.82rem;
      .icon {
        background: url(../assets/images/icon2.png) no-repeat center top / contain;
      }
      .car {
        background: url(../assets/images/han.png) no-repeat center top / contain;
      }
    }
    &.card2 {
      left: 5.08rem;
      .icon {
        background: url(../assets/images/icon3.png) no-repeat center top / contain;
      }
      .car {
        background: url(../assets/images/tang.png) no-repeat center top / contain;
      }
    }
    &.card3 {
      top: 2.61rem;
      left: 1.68rem;
      .icon {
        background: url(../assets/images/icon4.png) no-repeat center top / contain;
      }
      .car {
        background: url(../assets/images/song.png) no-repeat center top / contain;
      }
    }
    &.card4 {
      top: 2.61rem;
      left: 3.98rem;
      .icon {
        background: url(../assets/images/icon5.png) no-repeat center top / contain;
      }
      .car {
        background: url(../assets/images/yuan.png) no-repeat center top / contain;
      }
    }
  }
}
.repeat {
  display: none;
  width: 7.5rem;
  height: 7.11rem;
  background: url(../assets/images/repeat.png) no-repeat center top / contain;
  position: fixed;
  top: 2rem;
  left: 0;
  z-index: 10;
  .btn_share {
    width: 4.81rem;
    height: 1.02rem;
    background: url(../assets/images/btn_share.png) no-repeat center top / contain;
    position: absolute;
    top: 2.36rem;
    left: 50%;
    transform: translateX(-50%);
  }
  .close {
    width: 1rem;
    height: 1rem;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
